<template>
  <div class="singer music-cpns-common" v-infinite-scroll="InfinteLoad">
    <singer-brief :singerBrief="briefs" v-if="briefs"></singer-brief>
    <div class="songstable" style="width: 95%; margin-top: 20px">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        style="margin-left: 50px"
      >
        <el-tab-pane label="专辑" name="first">
          <singer-album
            :dataList="hotSongs"
            v-if="hotSongs"
            style="margin-top: 10px"
          ></singer-album>
          <template v-if="albumAll.length > 0">
            <singer-album
              v-for="item in albumAll"
              :key="item.album.id"
              :dataList="item.songs"
              :title="item.album.name"
              style="margin-top: 20px"
            >
              <template #albumImg>
                <img class="album-img" :src="item.album.picUrl" alt="404" />
              </template>
            </singer-album>
          </template>
        </el-tab-pane>
        <el-tab-pane label="MV" name="second">
          <singer-mv ref="MvRef"></singer-mv>
        </el-tab-pane>
        <el-tab-pane label="歌手详情" name="three">
          <singer-detail ref="DetailRef"></singer-detail>
        </el-tab-pane>
        <el-tab-pane label="相似歌手" name="four">
          <singer-resemble
            class="singer-mv"
            :singerId="id"
            ref="simiRef"
          ></singer-resemble>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import SingerBrief from '../cpns/singer-brief.vue'
import SingerResemble from '../cpns/singer-resemble.vue'
import SingerDetail from '../cpns/singer-detail.vue'
import SingerAlbum from '../cpns/singer-album.vue'
import SingerMv from '../cpns/singer-mv.vue'
import { InitDoing } from '../hook/singer'

export default defineComponent({
  components: {
    SingerBrief,
    SingerAlbum,
    SingerMv,
    SingerDetail,
    SingerResemble
  },
  setup() {
    const {
      id,
      briefs,
      hotSongs,
      activeName,
      handleClick,
      albumAll,
      MvRef,
      DetailRef,
      simiRef,
      InfinteLoad
    } = InitDoing()
    return {
      id,
      briefs,
      activeName,
      hotSongs,
      albumAll,
      handleClick,
      MvRef,
      DetailRef,
      simiRef,
      InfinteLoad
    }
  }
})
</script>

<style scoped lang="less">
.singer {
  padding-top: 30px;

  .songstable {
    position: relative;

    .album-img {
      width: 150px;
      height: 150px;
    }

    .singer-mv {
      width: 95%;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      padding-bottom: 30px;
    }
  }
}
</style>
